<template>
  <div class="main">
    <!-- 头部导航栏 -->
    <head-component
      :noBack="true"
      :rightClick="rightClick"
      :rightIcon="rightIcon"
      title="我的"/>
    <!-- 主体部分 -->
    <div class="main_box">
      <!-- 用户信息 -->
      <div class="user_info_box" @click="$router.push('/userInfo')">
        <img class="user_left" :src="userInfo.img" alt="">
        <div class="user_center">
          <div class="user_center_top">
            <span class="f34 col_33">{{userInfo.name}}</span>
            <span class="f24 user_idol" :class="userInfo.idol == 0 ? 'user_idol1' : 'user_idol2'">
              {{userInfo.idol == 0 ? '会员' : '合伙人'}}
            </span>
          </div>
          <div class="user_center_bottom col_99 f24">ID: <span>{{userInfo.ID}}</span></div>
        </div>
        <img class="user_right" src="@/common/icon/user/fanhui.png" alt="">
      </div>
      <!-- 审核状态 -->
      <div class="user_state_box">
        <div class="user_state border_right" @click="$router.push('/renwu/1')">
          <div class="user_state_num col_ff f52">{{shenhe}}</div>
          <div class="user_state_title col_ff f28">审核中</div>
        </div>
        <div class="user_state border_right" @click="$router.push('/renwu/2')">
          <div class="user_state_num col_ff f52">{{wancheng}}</div>
          <div class="user_state_title col_ff f28">已完成</div>
        </div>
        <div class="user_state" @click="$router.push('/renwu/3')">
          <div class="user_state_num col_ff f52">{{jujue}}</div>
          <div class="user_state_title col_ff f28">已拒绝</div>
        </div>
      </div>
      <!-- 列表部分 -->
      <div class="user_list_box">
        <div class="user_list" @click="toWallet">
          <img class="user_list_left" src="@/common/icon/user/qianbao.png" alt="">
          <div class="user_list_title f32">我的钱包</div>
          <img class="user_list_right" src="@/common/icon/user/next.png" alt="">
        </div>
        <div class="user_list" @click="$router.push('/team')">
          <img class="user_list_left" src="@/common/icon/user/tuandui.png" alt="">
          <div class="user_list_title f32">我的团队</div>
          <img class="user_list_right" src="@/common/icon/user/next.png" alt="">
        </div>
        <div class="user_list" @click="toUpload">
          <img class="user_list_left" src="@/common/icon/user/xiakuan.png" alt="">
          <div class="user_list_title f32">下款报备</div>
          <img class="user_list_right" src="@/common/icon/user/next.png" alt="">
        </div>
        <div class="user_list" @click="$router.push('/news')">
          <img class="user_list_left" src="@/common/icon/user/xiaoxi.png" alt="">
          <div class="user_list_title f32">我的消息</div>
          <img class="user_list_right" src="@/common/icon/user/next.png" alt="">
        </div>
        <div class="user_list" @click="$router.push('/callUs')">
          <img class="user_list_left" src="@/common/icon/user/lianxi.png" alt="">
          <div class="user_list_title f32">联系我们</div>
          <img class="user_list_right" src="@/common/icon/user/next.png" alt="">
        </div>
        <div class="user_list" @click="$router.push('/requ')">
          <img class="user_list_left" src="@/common/icon/navIcon8.png" alt="">
          <div class="user_list_title f32">常见问题</div>
          <img class="user_list_right" src="@/common/icon/user/next.png" alt="">
        </div>
      </div>

      <!-- 版权 -->
      <!-- <div class="banquan">郑州阳阳科技咨询服务有限公司</div> -->
    </div>
    <!-- 底部导航栏 -->
    <foot-component :select = '3'/>
  </div>
</template>
<script>
import headComponent from '@/components/layout/head';
import footComponent from "@/components/layout/foot";
export default {
  name: '',
  components: {
    headComponent,
    footComponent
  },
  data() {
    return {
      rightIcon: require("@/common/icon/user/setting.png"),
      userInfo: {
        img: require("@/common/image/user_img.png"),
        name: '',
        idol: 0, // 0用户，1会员，2合伙人
        ID: ''
      },
      isRenzheng: 0, // 0未认证 1已认证
      shenhe: '',
      wancheng: '',
      jujue: '',

    }
  },
  mounted() {
    this.getNews()
  },
  methods: {
    rightClick(){ // 跳转设置
      this.$router.push('/set')
    },
    // 获取页面数据
    getNews(){
      this.isRenzheng = localStorage.getItem('isRenzheng');
      let $this = this;
      let uid = localStorage.getItem('uid');
      let token = localStorage.getItem('token');
      var data = {u_id: uid,token:token};
      var t = this.$toast.loading({message:'正在加载数据',mask:true, duration:9999})
      $this.$axios.post('/index.php?m=user&c=index',data).then((res) => {
        t.clear();
        if(res.data.code == 1){
          if(res.data.user.m_avatar != ''){ $this.userInfo.img = res.data.user.m_avatar }
          $this.userInfo.name = res.data.user.m_name;
          $this.userInfo.ID = res.data.user.id;
          $this.userInfo.idol = res.data.user.m_level;
          $this.shenhe = res.data.shen_he; // 审核中
          $this.wancheng = res.data.pass; // 已完成
          $this.jujue = res.data.refuse; // 已拒绝
        }else if(res.data.code == 0){
          $this.$toast({
            message: res.data.msg,
            duration: 800,
            onClose:()=>{
              $this.$router.push('/login');
            }
          });

        } else {
          $this.$toast({
            message: res.data.msg,
            duration: 800
          });
        }
      })
    },
    // 跳往钱包
    toWallet(){
      if(this.isRenzheng == 0){
        this.$toast({
          message: '请先进行实名认证',
          duration: 800,
          onClose:()=>{
            this.$router.push('/renzheng')
          }
        })
        return;
      } else if(this.isRenzheng == 1){
        this.$router.push('/wallet')
        return;
      }
    },
    // 跳往上传凭证页面
    toUpload(){
      if(this.isRenzheng == 0){
        this.$toast({
          message: '请先进行实名认证',
          duration: 800,
          onClose:()=>{
            this.$router.push('/renzheng')
          }
        })
        return;
      } else if(this.isRenzheng == 1){
        this.$router.push('/upload')
        return;
      }
    },

    // toVip(){ // 跳往代理升级页面
    // var $this = this;
    //   if($this.userInfo.idol != 0){
    //     // location.href = path;
    //     // $this.$router.push("/vip")
    //     $this.$toast({
    //       message: '您已是vip用户',
    //       duration: 800,
    //     })
    //   }else{
    //     $this.$router.push("/vip");
    //   }
    // }
  },
}
</script>
<style lang="less">
  .banquan{
    text-align: center;
    margin-top: 0.5rem;
    color: #999
  }
  .is_vip_mask{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 1.333rem;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.1)
    // opacity: 0;
  }
  .main_box{
    margin-top: 1.5rem;
    padding: 0 0.4rem;
    // 用户信息部分
    .user_info_box{
      height: 1.4667rem;
      display: flex;
      display:-webkit-flex;
      align-items: center;
      -webkit-align-items: center;
      justify-content: space-between;
      -webkit-justify-content: space-between;
      .user_left{
        width: 1.4667rem;
        height: 1.4667rem;
        margin-right: 0.2rem;
        border-radius: 50%;
        -webkit-border-radius: 50%;
      }
      .user_center{
        flex:1;
        -webkit-flex:1;
        text-align: left;
        .user_center_top{
          display: flex;
          display:-webkit-flex;
          align-items: center;
          -webkit-align-items: center;
          margin-bottom: 0.1rem;
          .user_idol{
            height: 0.4rem;
            line-height: 0.4rem;
            margin-left: 0.5333rem;
            padding: 0 0.2333rem;
            color: #fff;
            border-radius: 0.45rem;
            -webkit-border-radius: 0.45rem;
          }
          .user_idol1{ background: #e3bd4b } // 会员
          .user_idol2{ background: #94ace9 } // 用户
          .user_idol3{ background: #b37fee } // 合伙人
        }
      }
      .user_right{height: 0.5333rem;}
    }
    // 审核状态部分
    .user_state_box{
      margin-top: 0.6rem;
      height: 2.6667rem;
      display: flex;
      display:-webkit-flex;
      align-items: center;
      -webkit-align-items: center;
      text-align: center;
      justify-content: space-around;
      -webkit-justify-content: space-around;
      background: url('~@/common/image/user_state_bg.png') no-repeat 0 0;
      background-size: cover;
      border-radius: 0.3rem;
      -webkit-border-radius: 0.3rem;
      .border_right{ border-right: 1Px solid rgba(255, 255, 255, 0.3) }
      .user_state{ width: 33.33333%;
        .user_state_title{
          opacity: 0.5;
          margin-top: 0.13rem;
        }
      }
    }
    // 列表部分
    .user_list_box{
      margin-top: 0.4rem;
      .user_list{
        height: 1.4667rem;
        display: flex;
        display:-webkit-flex;
        align-items: center;
        -webkit-align-items: center;
        justify-content: space-between;
        -webkit-justify-content: space-between;
        .user_list_left{
          width: 0.5333rem;
          margin-right: 0.2667rem;
        }
        .user_list_title{
          flex: 1;
          -webkit-flex: 1;
          text-align: left;
        }
        .user_list_right{ height: 0.4rem; }
      }

    }
  }
</style>
